<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>购物车</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/jquery-2.0.3.js"></script>
	<script src="js/bootstrap.js"></script>
	<style>
		* {
			box-sizing: border-box;
		}
		html,body {
			height: 100%;
			margin: 0 ;
			padding: 0;
			border: 0;
			background-color: #ffffff;
		}
		.shoubu {
			width: 100%;
			height: 0.8rem;
			background-color: #cccccc;
		}
		.shoubu2 {
			width: 100%;
			height: 0.8rem;
			text-align: center;
			display:flex;
			justify-content: space-between;
		}
		.tu11 {
			width: 0.5rem;
			height: 0.5rem;
			margin: 0.15rem;
		}
		b {
			font-size: 0.35rem;
			margin: 0.15rem;
		}
		.tu2 {
			width: 0.5rem;
			height: 0.5rem;
			margin: 0.15rem;
		}
		.disantu {
			position: relative;
			width: 100%;
			height: 2rem;
			border-bottom: 1px solid #cccccc;
			/*border: 1px solid red;*/
		}
		.tu1 {
			position: absolute;
			top: 0.2rem;
			left: 0;
			width: 2.54rem;
			height: 1.45rem;
		}
		.ziti {
			margin-left: 2.6rem;
			margin-top: 0.3rem;
			padding: 0;
			width: 100%;
			height: 1rem;
			position: relative;
		}
		.ziti p {
			font-size: 0.25rem;
			color: #888888;
		}
		.ziti h3 {
			font-size: 0.3rem;
			margin: 0;
		}
		button {
			width: 0.5rem;
			height: 0.5rem;
			text-align: center;
		}
		.glyphicon-trash {
			font-size: 0.3rem;
			/*float: right;*/
			left: 17%;
			top: 0.4rem;
		}
		/*.ziti span {*/
			/*font-size: 0.3rem;*/
			/*float: right;*/
		/*}*/
		.qingchu {
			width: 0;
			height: 0;
			margin: 0;
			padding: 0;
			clear: both;
		}
		.yuyue {
			width: 100%;
			height: 0.7rem;
			margin-top: 0.2rem;
			background-color: #f9f9f9;
			/*border: 1px solid #f7e1b5;*/
		}
		.yuyue p {
			font-size: 0.35rem;
			margin-top: 0.1rem;
			margin-left: 0.1rem;
		}
		.yuyue span {
			font-size: 0.35rem;
			margin-top: 0.1rem;
			color: orangered;
			float: right;
		}
		.tishi {
			width: 100%;
			height: 0.5rem;
		}
		.tishi p {
			font-size: 0.26rem;
			margin-left: 0.3rem;
			color: #888888;
		}
		.kong {
			width: 100%;
			height: 0.2rem;
			background-color: #f9f9f9;
		}
		.xuan {
			width: 100%;
			margin-bottom: 2rem;
		}
		.xuan input {
			width: 0.25rem;
			height: 0.25rem;
			margin-right: 0.5rem;
			margin-top: 0.12rem;
		}
		.xuan p {
			font-size: 0.25rem;
			width: 100%;
			height: 0.5rem;
			margin-left: 0.5rem;
			/*border-bottom: 1px solid #cccccc;*/
		}
		.jiesuan {
			width: 100%;
			height: 1rem;
			display:flex;
			position: fixed;
			bottom: 0;
			background-color: #ffffff;
		}
		.jiesuan button {
			width: 35%;
			height: 1rem;
		}
		.jiesuan p {
			font-size: 0.3rem;
		}
		.jiesuan span {
			font-size: 0.4rem;
			color: orangered;
		}
		.yige {
			width: 33%;
			height: 1rem;
			margin-left: 1.5rem;
		}

	</style>
</head>
<body>
<div class="shoubu">
	<div class="shoubu2">
		<a href="小米.html">
			<img class="tu11" src="jiantou.png" alt=""/>
		</a>
		<b>商品分类</b>
		<a href="#">
			<img class="tu2" src="sousuo.png" alt=""/>
		</a>
	</div>
</div>
<div class="disantu">
	<img class="tu1"  src="qumian.jpg">
	<div class="ziti">
		<h3>小米电视3S曲面65英寸</h3>
		<p>售价：8999元 合计：8999元</p>
		<button type="button" class="btn btn-default"> - </button>
		<button type="button" class="btn btn-default">1</button>
		<button type="button" class="btn btn-default"> + </button>
		<span class="glyphicon glyphicon-trash"></span>
	</div>
	<div class="qingchu"></div>
	</div>
	<div class="yuyue">
		<p class="glyphicon glyphicon-asterisk">预约电视挂架安装 服务</p> <span>预约服务</span>
	</div>
<div class="xian">
	<hr/>
</div>
<div class="tishi">
	<p>温馨提示：产品是否购买成功，以最终下单为准，请尽快结算</p>
</div>
<div class="kong"></div>
<div class="xuan">
	<p><input type="checkbox">+699元得小米路由器2（1T）</p>
	<hr/>
	<p><input type="checkbox">+79元得小米路由器青春版</p>
	<hr/>
	<p><input type="checkbox">+45元得小米插线板</p>
	<hr/>
	<p><input type="checkbox">+599元得小米电视会员卡（含爱奇艺VIP全平台特权）</p>
	<hr/>
</div>
<div class="jiesuan">
	<div class="yige">
	<p>共1件 金额: </p>
	<span>8999元</span>
		</div>
	<button type="button" class="btn btn-default">继续购物</button>
	<button type="button" class="btn btn-warning">去结算</button>
</div>
</body>
</html>
<script>
	$(function(){
		function fullwidth() {
			if ($('body').width() >= 720){
				$('html').css('font-size',100 + 'px');
				return;
			}
			var scale = $('body').width() / 720;
			$('html').css('font-size',100*scale + 'px');
		}
		fullwidth();
		$(window).resize(function(){
			fullwidth();
		})
	});
</script>